<template>
  <div class="page-card">
    <div class="page-card-content">
      <div class="item-title small-card-title">
        <span>发票（{{ total }}）
          <span class="page-card-amount">已开票金额(元)：{{ haveAmount|moneyFormat }}</span>
          <span class="page-card-amount">未开票金额(元)：{{ notHaveAmount|moneyFormat }}</span>
        </span>

        <div class="title-right">
          <span class="new-icon" @click="gotoNew()">新建</span>
        </div>
      </div>
      <div class="card-item">
        <div v-if="list.length<=0&&list.length<=0" class="no-data">
          <img src="@/assets/images/no-data.png">
          <span>暂无数据</span>
        </div>
        <div class="card-item-list">
          <div v-for="l in list" :key="l.id" class="card-item-list-item">
            <!-- <div class="list-item-title">
              <img src="@/assets/images/icon-quote.png">
              <span class="name-link" @click="gotoDetail(l)">{{ l.no }}</span>
            </div> -->
            <div class="list-item-row">
              <div class="item-row-title">申请单号：</div>
              <div class="item-row-content">
                <span class="name-link" @click="gotoDetail(l)">{{ l.no }}</span>
              </div>
            </div>
            <div class="list-item-row">
              <div class="item-row-title">
                状态：</div>
              <div class="item-row-content">
                {{ getEnumText(paymentStatus,l.status) }}
              </div>
            </div>
            <div class="list-item-row">
              <div class="item-row-title">开票金额(元)：</div>
              <div class="item-row-content">
                {{ l.amount |moneyFormat }}
              </div>
            </div>
            <div class="list-item-row">
              <div class="item-row-title">开票日期：</div>
              <div class="item-row-content">
                {{ formatTime(l.date,'YYYY-MM-DD') }}
              </div>
            </div>
          </div>
        </div>

      </div>
      <div v-if="list.length>0" class="link-btn">
        <span class="all-link" @click="gotoAll()">查看全部 </span>
      </div>
    </div>
  </div>
</template>
<script>
import { getDetailList } from '@/api/invoice'
import { formatTime } from '@/utils/tools'
import { getEnumText, paymentStatus } from '@/utils/enums'

export default {
  name: 'CoantactCard',
  props: {
    customerId: {
      type: String,
      default: ''
    },
    contractId: {
      type: String,
      default: ''
    },
    customerName: {
      type: String,
      default: ''
    },
    contractNo: {
      type: String,
      default: ''
    },
    orderId: {
      type: String,
      default: ''
    },
    orderNo: {
      type: String,
      default: ''
    },
    payId: {
      type: String,
      default: ''
    },
    payNo: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }

  },
  data() {
    return {
      paymentStatus,
      total: 0,
      list: [],
      haveAmount: 0,
      notHaveAmount: 0

    }
  },
  mounted() {
    const queryParam = {
      currentPage: 1, pageSize: 2
    }
    if (this.type === '6') {
      // 合同下的开票
      queryParam.contractId = this.contractId
    } else if (this.type === '10') {
      // 订单下的开票
      queryParam.orderId = this.orderId
    } else if (this.type === '9') {
      // 回款下的开票
      queryParam.contractId = this.contractId
    } else {
      // 客户下的开票
      queryParam.customerId = this.customerId
    }
    getDetailList(queryParam).then(res => {
      if (res.invoiceDetailList) {
        this.total = res.invoiceDetailList.total
        this.list = res.invoiceDetailList.records
      }
      this.haveAmount = res.haveAmount
      this.notHaveAmount = res.notHaveAmount
    })
  },
  methods: {
    formatTime,
    getEnumText,
    //
    gotoAll() {
      if (this.type === '6') {
      // 合同下的开票
        this.gotoMainPage('invoice', { contractId: this.contractId })
      } else if (this.type === '10') {
      // 订单下的开票
        this.gotoMainPage('invoice', { orderId: this.orderId })
      } else if (this.type === '9') {
      // 回款下的开票
        this.gotoMainPage('invoice', { contractId: this.contractId })
      } else {
      // 客户下的开票
        this.gotoMainPage('invoice', { customerId: this.customerId })
      }
    },
    gotoDetail(l) {
      this.gotoMainPage('invoice/info', { id: l.id })
    },
    gotoNew() {
      this.gotoMainPage('invoice', {
        customerId: this.customerId,
        customerName: this.customerName,
        contractId: this.contractId,
        contractNo: this.contractNo,
        orderId: this.orderId,
        orderNo: this.orderNo,
        open: true })
    }

  }
}
</script>
